<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>

        .modal {
            position: absolute;
            left: 300px;

        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <button @click="btnAddClick">添加</button>
    </div>
    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in items">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="btnReduceClick(index)">-</button>
                {{item.quantity}}
                <button @click="btnIncrementClick(index)">+</button>
            </td>
            <td>{{item.price*item.quantity}}</td>
        </tr>
        <tr>
            <td colspan="5">
             <hr/>
            </td>
        </tr>
        <tr>
            <td colspan="4">总计：</td>
            <td>{{getSum()}}</td>
        </tr>
        </tbody>

    </table>


    <div class="modal" v-show="isShow">
        <div>
            <label>商品名称:</label><input v-model="current.name"/>
        </div>
        <div>
            <label>商品价格:</label><input v-model="current.price"/>
        </div>
        <div>
            <label>商品数量:</label><input v-model="current.quantity"/>
        </div>
        <div>
            <button @click="btnInsertClick">添加</button>
        </div>
    </div>
</div>


</body>
<script src="../../../lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            items: [
                {
                    name: 'phone1',
                    price: 120,
                    quantity: 2
                }
            ],
            current: {
                name: '',
                price: 1,
                quantity: 0
            },
            isShow: false
        }, methods: {
            btnReduceClick: function (index) {
                --this.items[index].quantity;
            }, btnIncrementClick: function (index) {
                ++this.items[index].quantity;
            }, btnAddClick: function () {

                this.isShow = true;

            }, btnInsertClick: function () {
                this.items.unshift({
                    name: this.current.name,
                    price: this.current.price,
                    quantity: this.current.quantity
                });
            }, getSum: function () {
                return this.items.reduce(function (total, item) {
                    return total + item.price * item.quantity;
                }, 0)
            }
        }
    })

</script>

</html>